<template>
  <div class="container" @click.stop="showLanguageHandel">
    <!-- <div class="shadowLeftTop-1"></div>
    <div class="shadowLeftTop-2"></div>
    <div class="shadowRightBottom"></div> -->
    <div class="page_content container-tt">
      <header class="flex_between">
        <div class="headLogo">
          <div class="flex_ shou" @click="goToApp('video')">
            <img
              src="@/static/logo.svg"
              class="img"
              alt="logo"
              width="34"
              height="34"
            />
            <span class="projectName">SavingTik</span>
          </div>
        </div>
        <div class="headTabs flex_">
          <!-- <div class="tItem shou" @click="goToApp('video')">
            {{ currentObj.TikTokDownloader }}
          </div> -->
          <div class="tItem shou" @click="goToApp('mp3')">
            {{ currentObj.DownloadTikTokMP3 }}
          </div>
          <div class="tItem shou" @click="goToApp('story')">
            {{ currentObj.DownloadTikTokStory }}
          </div>
          <language ref="languageRef"></language>
        </div>
        <div class="drawer" @click="showAppRightHandel">
          <img src="@/static/menu.png" class="img" alt="" />
        </div>
      </header>
      <div class="textContent flex_ccenter">
        <div class="content flex_ccenter">
          <div class="error">404:Page not found</div>
          <div class="goHome">
            Check the web address and try again, or return to the SavingTik
            <span class="shou homeBtn" @click="goToApp('video')"
              >home page</span
            >
          </div>
          <img class="img" src="@/static/404.webp" alt="404" />
        </div>
      </div>
      <div class="footer">
        <div class="bottom_nav flex_between">
          <div class="logo">
            <img src="@/static/big-logo.svg" class="img" alt="" />
          </div>
          <div class="nav_list flex_">
            <div class="item">
              <div class="item_title">{{ currentObj.Company }}</div>
              <nuxt-link to="/contact">
                <div class="item_text shou">{{ currentObj.contact }}</div>
              </nuxt-link>
              <nuxt-link to="/blog">
                <div class="item_text shou">blog</div>
              </nuxt-link>
            </div>
            <div class="item">
              <div class="item_title shou">{{ currentObj.Legal }}</div>
              <nuxt-link to="/terms-of-use">
                <div class="item_text">{{ currentObj.Termsofuse }}</div>
              </nuxt-link>
              <nuxt-link to="/privacy-policy">
                <div class="item_text">{{ currentObj.PrivacyPolicy }}</div>
              </nuxt-link>
            </div>
            <div class="item">
              <div class="item_title">{{ currentObj.Tools }}</div>
              <!-- <div class="item_text shou" @click="goToAppTools('video')">
                {{ currentObj.TikTokDownloader }}
              </div>
              <div class="item_text shou" @click="goToAppTools('mp3')">
                {{ currentObj.DownloadTikTokMP3 }}
              </div>
              <div class="item_text shou" @click="goToAppTools('story')">
                {{ currentObj.DownloadTikTokStory }}
              </div> -->
              <!-- <div class="item_text shou" @click="goToAppTools('video')">
                 How to Download video TikTok
               </div> -->
              <nuxt-link to="/save-tiktok-videos-without-posting">
                <div class="item_text shou">
                  How to save tiktok videos without posting
                </div>
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page_bottom flex_center">
      ©SavingTik.Com 2023 All Rights Reserved.
    </div>
    <div class="app_page_bottom">
      <div class="hefl flex_center">
        ©SavingTik.Com 2023 All Rights Reserved.
      </div>
      <div class="links flex_ccenter">
        <nuxt-link to="/contact">
          <div>{{ currentObj.contact }}</div>
        </nuxt-link>
        <nuxt-link to="/terms-of-use">
          <div class="tr">{{ currentObj.Termsofuse }}</div>
        </nuxt-link>
        <nuxt-link to="/privacy-policy">
          <div>{{ currentObj.PrivacyPolicy }}</div>
        </nuxt-link>
        <nuxt-link to="/blog">
          <div>blog</div>
        </nuxt-link>
      </div>
    </div>
    <video src="" id="video" autoplay muted v-show="false"></video>
    <div class="dloading" v-if="dloading">
      <div class="loader"></div>
    </div>
    <van-popupapp ref="popupAppRef"></van-popupapp>
  </div>
</template>
     
     <script>
import CryptoJS from "crypto-js";
import { ImagePreview } from "vant";
import { handleClick } from "@/plugins/Firebase.js";
import { mapState, mapGetters, mapMutations } from "vuex";
import vanPopupapp from "@/components/vanPopupapp.vue";
import dataList from "@/static/tools.js";
import language from "@/components/language.vue";

export default {
  components: { vanPopupapp, language },
  head: {
    title: "404 - Page not found",
    meta: [
      {
        name: "viewport",
        content:
          "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no",
      },
      { name: "robots", content: "noindex" },
    ],
    link: [
      // Favicons
      {
        rel: "shortcut icon",
        href: "/static/logo/favicon.png",
        sizes: "512x512",
      },
      {
        rel: "apple-touch-icon",
        href: "/static/logo/favicon.png",
        sizes: "192x192",
      },
      //Apple Touch Icons

      //multilingual
      {
        rel: "canonical",
        href: "https://savingtik.com/contact",
      },
    ],
  },
  name: "contact",
  data() {
    return {
      showSwiper: false,
      showBigImage: false,
      showAppRight: false,
      input: "",
      dloading: false,

      showLanguage: false,
      Language: "en_GB",
      isHttpLoading: false,
      downSuccess: false,
      downStorySuccess: false,
      httpError: false,
      downData: {},
      WithoutVideoSize: "",
      duration: "",
      VideoSize: "",
      emailAddress: "happyfish2024@gmail.com",
      currentList: dataList.list,
      list: [
        "English", // 英语
        "Bahasa Indonesia", // 印度尼西亚语
        "Tiếng Việt", // 越南语
        "Bahasa Malaysia", // 马来语
        "Basa Jawa", // 爪哇语
        "Čeština", // 捷克语
        "Español", // 西班牙语
        "Français", // 法语
        "German", // 德语
        "Italian", // 意大利语
        "Magyar", // 匈牙利语
        "Nederlands", // 荷兰语
        "Polish", // 波兰语
        "Português", // 葡萄牙语
        "Română", // 罗马尼亚语
        "Thailand", // 泰语
        "Turkish (Turkey)", // 土耳其语
        "Ελληνικά", // 希腊语
        "украї́нська мо́ва", // 乌克兰语
        "Русский", // 俄语
        "عَرَبِيّ", // 阿拉伯语
        "한국어", // 韩语
        "日本語", // 日语
      ],
      list1: [
        "en", // 英语
        "id", // 印度尼西亚语
        "vn", // 越南语
        "ms", // 马来语
        "jv", // 爪哇语
        "cs", // 捷克语
        "es", // 西班牙语
        "fr", // 法语
        "de", // 德语
        "it", // 意大利语
        "hu", // 匈牙利语
        "nl", // 荷兰语
        "pl", // 波兰语
        "pt", // 葡萄牙语
        "ro", // 罗马尼亚语
        "th", // 泰语
        "tr", // 土耳其语
        "el", // 希腊语
        "uk", // 乌克兰语
        "ru", // 俄语
        "ar", // 阿拉伯语
        "ko", // 韩语
        "ja", // 日语
      ],
    };
  },
  computed: {
    ...mapGetters(["language"]),
    currentObj() {
      return this.currentList[this.current];
    },
    current() {
      return this.list1.findIndex((x) => x == this.language);
    },
  },
  mounted() {
    if (process.client) {
      if (!localStorage.getItem("language")) {
        localStorage.setItem("language", "en");
        this.setLanguageHandel("en");
      } else {
        this.setLanguageHandel(localStorage.getItem("language"));
      }
    }
  },
  methods: {
    showAppRightHandel() {
      this.$refs.popupAppRef.open();
    },
    showLanguageHandel() {
      this.$refs.languageRef.close();
    },
    ...mapMutations(["setLanguage"]),
    setLanguageHandel(lang) {
      this.setLanguage(lang);
    },
    goToApp(type) {
      let url = "";
      switch (type) {
        case "video":
          url = "";
          break;
        case "mp3":
          url = "/download-tiktok-mp3";
          break;
        default:
          url = "/download-tiktok-story";
      }
      if (this.language !== "en") {
        url = `/${this.language}${url}`;
      } else if (this.language == "en" && type == "video") {
        url = `/`;
      }
      this.$router.push(url);
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "top",
      });
    },
    goToAppTools(type) {
      let url = "";
      switch (type) {
        case "video":
          url = "";
          break;
        case "mp3":
          url = "/download-tiktok-mp3";
          break;
        default:
          url = "/download-tiktok-story";
      }
      if (this.language !== "en") {
        url = `/${this.language}${url}`;
      }
      this.$router.push(url);
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "tools",
      });
    },
  },
};
</script>
     <style lang="scss" scoped>
.link {
  color: #3ec6ff;
}
@media (min-width: 992px) {
  .container-tt {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    
  }
}

@media (min-width: 1200px) {
  .container-tt {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1024px) {
  .shadowLeftTop-1 {
    position: fixed;
    width: 1095px;
    height: 678px;
    background: #ff0ead;
    mix-blend-mode: normal;
    left: -200px;
    top: -135px;
    -webkit-filter: blur(487px);
    opacity: 0.35;
    filter: blur(478px);
    transform: rotate(16deg);
  }
  .shadowLeftTop-2 {
    position: fixed;
    width: 857px;
    height: 541px;
    background: #092877;
    mix-blend-mode: normal;
    left: -346px;
    top: -346px;
    -webkit-filter: blur(240px);
    opacity: 0.25;
    filter: blur(240px);
    transform: rotate(45deg);
  }
  .shadowRightBottom {
    position: fixed;
    width: 1021px;
    height: 533px;
    background: #00fff7;
    mix-blend-mode: normal;
    right: -803px;
    bottom: 15px;
    -webkit-filter: blur(378px);
    opacity: 0.25;
    filter: blur(378px);
    transform: rotate(20deg);
  }
  .page_content {
    width: 100%;
    min-height: calc(100vh - 153px);
    z-index: 100;
    position: relative;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    header {
      position: relative;
      padding: 14px 0;
      z-index: 999;
      .headLogo {
        width: 34px;
        height: 34px;
        .projectName {
          font-size: 21px;
          font-family: Inter-Extra Bold Italic, Inter;
          font-weight: 800;
          font-style: italic;
          color: #ffffff;
          margin-left: 14px;
        }
      }
      .drawer {
        display: none;
      }
      .headTabs {
        .tItem {
          position: relative;
          width: 220px;
          text-align: right;
          height: 38px;
          font-size: 14px;
          font-family: Poppins-Light, Poppins;
          color: rgba(255, 255, 255, 0.5);
          line-height: 38px;
          .bor {
            position: absolute;
            bottom: -18px;
            left: 70px;
            width: 152px;
            height: 1px;
            background: rgba(255, 255, 255, 0.5);
          }
          .expand {
            position: absolute;
            top: 0;
            right: -20px;
            width: 10px;
            height: 8px;
            margin-left: 4px;
          }
          .Language_box {
            position: absolute;
            left: 100px;
            bottom: -200px;
            z-index: 9999;
            width: 162px;
            height: 177px;
            background: rgba(43, 67, 89, 0.15);
            border-radius: 12px;
            overflow-y: scroll;
            padding: 0 14px;
            .item {
              padding: 14px 0;
              border-bottom: 1px solid rgba(125, 125, 125, 0.1);
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
              text-align: center;
              line-height: 1;
              .dian {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: rgba(0, 255, 247, 1);
                margin-right: 10px;
              }
            }
            .changeItemColor {
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: #ffffff;
            }
            .item:last-child {
              border: 0;
            }
          }
        }
        .tItemFFF {
          color: #fff;
        }
        .tItemBlod {
          color: #fff;
          font-weight: 700;
          // font-family: Poppins-Bold, Poppins;
        }
      }
    }
    .textContent {
      flex: 1;
      color: #fff;
      min-height: 800px;
      .content {
        flex: 1;
        padding-top: 100px;
        width: 800px;
        font-size: 22px;
        line-height: 52px;
        .error {
          font-size: 68px;
          font-family: Yeseva One-Regular, Yeseva One;
          font-weight: 400;
          color: #ffffff;
        }
        .goHome {
          margin: 40px 0;
          font-size: 16px;
          font-family: Poppins-Regular, Poppins;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.5);
          .homeBtn {
            display: inline-block;
            text-align: center;
            margin-left: 10px;
            width: 134px;
            height: 44px;
            line-height: 44px;
            font-size: 14px;
            color: #fff;
            font-weight: 700;
            background: linear-gradient(180deg, #26d8ff 0%, #4426ff 100%);
            border-radius: 4px 4px 4px 4px;
          }
        }

        .img {
          width: 800px;
          height: auto;
          margin-bottom: 200px;
        }
      }
    }
    .footer {
      position: relative;

      .bottom_nav {
        align-items: flex-start;
        .logo {
          transform: translate(-10px, -27px);
          width: 132px;
          height: 171px;
        }
        .nav_list {
          align-items: flex-start;
          .item {
            margin-left: 140px;
            .item_title {
              margin-bottom: 20px;
              font-size: 18px;
              font-family: Poppins-Bold, Poppins;
              font-weight: bold;
              color: #ffffff;
            }
            .item_text {
              margin-bottom: 20px;
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
  }
  .page_bottom {
    margin-top: 30px;
    padding: 40px 0;
    border-top: 2px solid rgba(217, 217, 217, 0.1);
    font-size: 14px;
    font-family: Poppins-Regular, Poppins;
    color: rgba(255, 255, 255, 0.5);
  }
  .app_page_bottom {
    display: none;
  }
}
@media (max-width: 1023px) {
  /* 当设备屏幕宽度小于等于1023像素时，应用其中定义的样式。 */

  .shadowLeftTop-1 {
    position: fixed;
    width: 300px;
    height: 300px;
    background: #ff0ead;
    mix-blend-mode: normal;
    left: -100px;
    top: -150px;
    -webkit-filter: blur(110px);
    opacity: 0.3;
    filter: blur(110px);
    transform: rotate(16deg);
  }
  .shadowLeftTop-2 {
    position: fixed;
    width: 200px;
    height: 200px;
    background: #092877;
    mix-blend-mode: normal;
    left: 50px;
    top: -50px;
    -webkit-filter: blur(80px);
    opacity: 0.25;
    filter: blur(80px);
    transform: rotate(45deg);
  }
  .shadowRightBottom {
    position: fixed;
    width: 300px;
    height: 200px;
    background: #26aaa6;
    opacity: 0.6;
    mix-blend-mode: normal;
    right: -125px;
    bottom: -12px;
    -webkit-filter: blur(100px);
    opacity: 0.25;
    filter: blur(100px);
    transform: rotate(20deg);
  }
  .page_content {
    padding: 0 34px;
    min-height: calc(100vh - 150px);
    z-index: 100;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    header {
      position: relative;
      padding: 14px 0;
      z-index: 999;
      .headLogo {
        transform: translateX(-14px);
        width: 19px;
        height: 19px;
        .projectName {
          font-size: 12px;
          font-family: Inter-Extra Bold Italic, Inter;
          font-weight: 800;
          font-style: italic;
          color: #ffffff;
          margin-left: 12px;
        }
      }
      .drawer {
        display: block;
        width: 26px;
        height: 26px;
        transform: translateX(14px);
      }
      .headTabs {
        display: none;
        .tItem {
          position: relative;
          width: 220px;
          text-align: right;
          height: 38px;
          font-size: 14px;
          font-family: Poppins-Light, Poppins;
          color: rgba(255, 255, 255, 0.5);
          line-height: 38px;
          .bor {
            position: absolute;
            bottom: -18px;
            left: 82px;
            width: 142px;
            height: 1px;
            background: rgba(255, 255, 255, 0.5);
          }
          .expand {
            position: absolute;
            top: 0;
            right: -20px;
            width: 10px;
            height: 8px;
            margin-left: 4px;
          }
          .Language_box {
            position: absolute;
            left: 100px;
            bottom: -200px;
            z-index: 9999;
            width: 162px;
            height: 177px;
            background: rgba(43, 67, 89, 0.15);
            border-radius: 12px;
            overflow-y: scroll;
            padding: 0 14px;
            .item {
              padding: 14px 0;
              border-bottom: 1px solid rgba(125, 125, 125, 0.1);
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
              text-align: center;
              line-height: 1;
              .dian {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: rgba(0, 255, 247, 1);
                margin-right: 10px;
              }
            }
            .changeItemColor {
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: #ffffff;
            }
            .item:last-child {
              border: 0;
            }
          }
        }
        .tItemFFF {
          color: #fff;
        }
        .tItemBlod {
          color: #fff;
          font-weight: 700;
          // font-family: Poppins-Bold, Poppins;
        }
      }
    }
    .textContent {
      flex: 1;
      color: #fff;
      .content {
        line-height: 22px;
        .error {
          font-size: 28px;
          font-family: Yeseva One-Regular, Yeseva One;
          font-weight: 400;
          color: #ffffff;
        }
        .goHome {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin: 40px 0;
          font-size: 10px;
          font-family: Poppins-Regular, Poppins;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.5);
          .homeBtn {
            display: inline-block;
            text-align: center;
            margin-left: 10px;
            width: 94px;
            height: 30px;
            line-height: 30px;
            font-size: 10px;
            color: #fff;
            font-weight: 700;
            background: linear-gradient(180deg, #26d8ff 0%, #4426ff 100%);
            border-radius: 4px 4px 4px 4px;
          }
        }

        .img {
          width: 100%;
          height: auto;
        }
      }
    }
    .footer {
      display: none;
      margin-top: 300px;
      .bottom_nav {
        align-items: flex-start;
        .logo {
          transform: translate(-60px, -77px);
          width: 182px;
          height: 182px;
        }
        .nav_list {
          align-items: flex-start;
          .item {
            margin-left: 140px;
            .item_title {
              margin-bottom: 20px;
              font-size: 21px;
              font-family: Poppins-Bold, Poppins;
              font-weight: bold;
              color: #ffffff;
            }
            .item_text {
              margin-bottom: 20px;
              font-size: 16px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
  }
  .page_bottom {
    display: none;
    margin-top: 100px;
    padding: 40px 0;
    border-top: 2px solid rgba(217, 217, 217, 0.1);
    font-size: 14px;
    font-family: Poppins-Regular, Poppins;
    color: rgba(255, 255, 255, 0.2);
  }
  .app_page_bottom {
    position: relative;
    padding: 14px 40px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(217, 217, 217, 0.03);
    font-family: Poppins-Regular, Poppins;
    color: rgba(255, 255, 255, 0.5);
    .hefl {
      color: rgba(255, 255, 255, 0.1);

      font-size: 10px;
      margin-bottom: 12px;
    }
    .links {
      font-size: 12px;
      div {
        margin-top: 10px;
      }
    }
  }
}
.popup_box {
  width: 100%;
  height: 100%;
  background: #080f25;

  .close {
    padding: 14px;
    .img {
      width: 26px;
      height: 26px;
    }
  }
  .page_box {
    margin-bottom: 20px;
    .item {
      padding: 16px;
      padding-left: 20px;
      font-size: 12px;
      font-family: Poppins-Regular, Poppins;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #00fff7;
        margin-right: 8px;
      }
    }
    .item:nth-child(2) {
      background-color: rgba(17, 44, 60, 0.3);
      font-size: 12px;
      font-family: Poppins-Bold, Poppins;
      font-weight: bold;
      color: #00fff7;
    }
    .item:nth-child(1) {
      .dian {
        background: transparent;
      }
    }
    .item:nth-child(3) {
      .dian {
        background: transparent;
      }
    }
  }
  .Language_box {
    padding-top: 30px;
    border-top: 1px solid rgba(217, 217, 217, 0.1);
    .title {
      font-size: 12px;
      font-family: Poppins-Regular, Poppins;
      font-weight: 400;
      color: #ffffff;
      padding-bottom: 10px;
      padding-left: 20px;
    }
    .item {
      padding: 16px;
      padding-left: 20px;
      font-size: 12px;
      font-family: Poppins-Regular, Poppins;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #00fff7;
        margin-right: 8px;
      }
    }
    .item:nth-child(2) {
      background-color: rgba(17, 44, 60, 0.3);
      font-size: 12px;
      font-family: Poppins-Bold, Poppins;
      font-weight: bold;
      color: #00fff7;
    }
    .item:nth-child(3) {
      .dian {
        background: transparent;
      }
    }
    .item:nth-child(4) {
      .dian {
        background: transparent;
      }
    }
    .item:nth-child(5) {
      .dian {
        background: transparent;
      }
    }
  }
}
@media (min-width: 992px) {
    .container-tt {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }

    .page_content .footer .bottom_nav .nav_list {
        align-items: flex-start;

        .item {
            margin-left: 100px;
            width: 160px;

            .item_title {
                margin-bottom: 20px;
                font-size: 18px;
                font-family: Poppins-Bold, Poppins;
                font-weight: bold;
            }

            .item_text {
                margin-bottom: 20px;
                font-size: 14px;
                font-family: Poppins-Regular, Poppins;
                font-weight: 400;
            }
        }
    }
}

@media (min-width: 1200px) {
    .container-tt {
        max-width: 1140px;
        margin-left: auto;
        margin-right: auto;
    }

    .nav_list {
        align-items: flex-start;

        .item {
            margin-left: 140px !important;
            width: 200px !important;

            .item_title {
                margin-bottom: 20px;
                font-size: 18px;
                font-family: Poppins-Bold, Poppins;
                font-weight: bold;
            }

            .item_text {
                margin-bottom: 20px;
                font-size: 14px;
                font-family: Poppins-Regular, Poppins;
                font-weight: 400;
            }
        }
    }
}
</style>